<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>配送员专栏</title>
    <link rel="stylesheet" th:href="@{/component/pear/css/pear.css}" />
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <table id="user-table" lay-filter="user-table"></table>
    </div>
</div>

<script type="text/html" id="user-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit">详情</button>
</script>

<script type="text/html" id="user-toolbar">
    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="print">
        <i class="layui-icon layui-icon-print"></i>
        批量打印
    </button>
</script>

<script th:src="@{/component/layui/layui.js}"></script>
<script th:src="@{/component/pear/pear.js}"></script>
<script>
    layui.use(['table', 'form', 'jquery','common'], function() {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let common = layui.common;

        let cols = [
            [
                {
                    type: 'checkbox'
                },
                {
                    title: '订单编号',
                    field: 'orderId',
                    align: 'center',
                    width: 150
                },
                {
                    title: '用户名',
                    field: 'name',
                    align: 'center',
                    width: 100
                },
                {
                    title: '电话',
                    field: 'telephone',
                    align: 'center',
                    width: 120
                },
                {
                    title: '下单时间',
                    field: 'orderTime',
                    align: 'center',
                    width: 160
                },
                {
                    title: '订单金额',
                    field: 'orderPrice',
                    align: 'center',
                    width: 120
                },
                {
                    title: '操作',
                    toolbar: '#user-bar',
                    align: 'center',
                    width: 150
                }
            ]
        ]

        table.render({
            elem: '#user-table',
            url: '/order/page',
            page: true,
            parseData:function(res) {
                return {
                    "code" : 0,
                    "msg" : "",
                    "count" : res.data.total,
                    "data": res.data.records
                }
            },
            cols: cols,
            skin: 'line',
            limits: [10, 20],
            toolbar: '#user-toolbar',
            defaultToolbar: []
        });

        table.on('tool(user-table)', function(obj) {
            if (obj.event === 'edit') {
                window.edit(obj);
            }
        });

        window.edit = function(obj) {
            layer.open({
                type: 2,
                title: '订单详情',
                shade: 0.1,
                area: ['800px', '400px'],
                content: '/back/toDetails/' + obj.data['orderId']
            });
        }

        table.on('toolbar(user-table)', function(obj) {
            if (obj.event === 'print') {

                var checkIds = common.checkField(obj, 'orderId');

                if (checkIds === "") {
                    layer.msg("未选中数据", {
                        icon: 3,
                        time: 1000
                    });
                    return false;
                }

                layer.confirm('确定批量打印这些订单吗', {
                    icon: 3,
                    title: '提示'
                }, function(index) {
                    layer.close(index);
                    let loading = layer.load();
                    // 创建get请求路径
                    let downloadUrl = "http://localhost:8888/order/printCaterer/" + checkIds;
                    // 创建a标签
                    let label = $("<a>");
                    // 添加属性
                    label.prop("href",downloadUrl);
                    // 追加标签
                    $("body").append(label);
                    // 点击a标签，为什么要加[0]不懂，不加点击函数不生效
                    label[0].click();
                    // 点击后移除标签
                    label.remove();
                    layer.close(loading);
                    layer.msg("打印成功", {
                        icon: 1,
                        time: 1000
                    }, function() {
                        table.reload('user-table');
                    });
                });
            }
        });
    })
</script>
</body>
</html>